<template>
   <el-card>
      <el-table border style="margin: 10px 0;" :data="skuArr">
         <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
         <el-table-column label="名称" width="230px" show-overflow-tooltip prop="skuName"></el-table-column>
         <el-table-column label="描述" width="230px" show-overflow-tooltip prop="skuDesc"></el-table-column>
         <el-table-column label="默认图片" width="230px">
            <template #="{ row, $index }">
               <img :src="row.skuDefaultImg" style="width: 150px; height: 150px;">
            </template>
         </el-table-column>
         <el-table-column label="重量(g)" width="230px" prop="weight"></el-table-column>
         <el-table-column label="价格(元)" width="230px" prop="price"></el-table-column>
         <el-table-column label="操作" width="300px" fixed="right">
            <template #="{ row, $index }">
               <el-button type="primary" :icon="row.isSale == 1 ? 'Bottom' : 'Top'" @click="updateSale(row)"></el-button>
               <el-button type="primary" icon="Edit" @click="updateSku"></el-button>
               <el-button type="primary" icon="InfoFilled" @click="viewSku(row)"></el-button>
               <el-popconfirm :title="`你确定要删除${row.skuName}?`" @confirm="deleteSku(row)" width="250px">
                  <template #reference>
                     <el-button type="primary" icon="Delete"></el-button>
                  </template>
               </el-popconfirm>
            </template>
         </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
         :background="true" layout="prev, pager, next, jumper, ->, sizes, total" :total="total"
         @current-change="getSkuList" @size-change="handler" />
      <!-- 抽屉组件：展示商品的详细信息 -->
      <el-drawer v-model="drawer">
         <template #header>
            <h4>查看商品详情</h4>
         </template>
         <template #default>
            <el-row style="margin: 10px 0;">
               <el-col :span="6">名称</el-col>
               <el-col :span="18">{{ skuInfo.skuName }}</el-col>
            </el-row>
            <el-row style="margin: 10px 0;">
               <el-col :span="6">描述</el-col>
               <el-col :span="18">{{ skuInfo.skuDesc }}</el-col>
            </el-row>
            <el-row style="margin: 10px 0;">
               <el-col :span="6">价格</el-col>
               <el-col :span="18">{{ skuInfo.price }}</el-col>
            </el-row>
            <el-row style="margin: 10px 0;">
               <el-col :span="6">平台属性</el-col>
               <el-col :span="18">
                  <el-tag style="margin: 5px;" v-for="item in skuInfo.skuAttrValueList" :key="item.id">{{ item.valueName
                  }}</el-tag>
               </el-col>
            </el-row>
            <el-row style="margin: 10px 0;">
               <el-col :span="6">销售属性</el-col>
               <el-col :span="18">
                  <el-tag style="margin: 5px;" v-for="item in skuInfo.skuSaleAttrValueList" :key="item.id">{{
                     item.saleAttrValueName }}</el-tag>
               </el-col>
            </el-row>
            <el-row style="margin: 10px 0;">
               <el-col :span="6">商品图片</el-col>
               <el-col :span="18">
                  <el-carousel :interval="3000" type="card" height="400px" direction="vertical">
                     <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
                        <img :src="item.imgUrl">
                     </el-carousel-item>
                  </el-carousel>
               </el-col>
            </el-row>
         </template>
      </el-drawer>

   </el-card>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
// 引入请求
import { reqSkuList, reqSkuCancelSale, reqSkuOnSale, reqSkuInfo, reqDeleteSku } from '@/api/product/sku/index'
import { SkuData } from '@/api/product/sku/type'
import { ElMessage } from 'element-plus'
// 分页器当前页码
let pageNo = ref<number>(1)
// 每页展示数据条数
let pageSize = ref<number>(10)
// 数据总数
let total = ref<number>(0)
// sku数据
let skuArr = ref<SkuData[]>([])
// 控制抽屉组件的显示和隐藏
let drawer = ref<boolean>(false)
// sku详细数据
let skuInfo = ref<SkuData>({})
// 获取sku数据的方法
const getSkuList = async (pager = 1) => {
   pageNo.value = pager
   let result = await reqSkuList(pageNo.value, pageSize.value)
   if (result.code == 200) {
      total.value = result.data.total
      skuArr.value = result.data.records
   }
}
// 组件挂载完毕
onMounted(() => {
   getSkuList()
})
// 分页器下拉菜单发生变化时触发
const handler = (pageSize: number) => {
   getSkuList()
}
// 商品的上架与下架的操作
const updateSale = async (row: SkuData) => {
   if (row.isSale == 1) {
      // 发起下架请求并重新获取数据
      let result = await reqSkuCancelSale((row.id as number))
      if (result.code == 200) {
         ElMessage.info('下架成功！')
         getSkuList(pageNo.value)
      }
   } else {
      // 发起上架请求并重新获取数据
      let result = await reqSkuOnSale((row.id as number))
      if (result.code == 200) {
         ElMessage.success('上架成功！')
         getSkuList(pageNo.value)
      }
   }
}
// 编辑按钮的回调
const updateSku = () => {
   ElMessage.success('程序员在努力开发中...')
}
// 查看商品详情按钮的回调
const viewSku = async (row: SkuData) => {
   drawer.value = true
   let result = await reqSkuInfo((row.id as number))
   // 存储已有的sku
   skuInfo.value = result.data
}
// 删除sku按钮的回调
const deleteSku = async (row: SkuData) => {
   let result = await reqDeleteSku((row.id as number))
   if (result.code == 200) {
      ElMessage.success('删除成功！')
      // 获取已有的全部商品
      getSkuList(skuArr.value.length > 1 ? pageNo.value : pageNo.value - 1)
   } else {
      ElMessage.error(`删除失败！${result.data}`)
   }
}
</script>

<style lang="scss" scoped>
.el-carousel__item img {
   height: 100%;
   opacity: 0.75;
   margin: 0 auto;
}

.el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
   background-color: #d3dce6;
}
</style>